<script setup>
import { ref, computed, inject } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { storeToRefs } from 'pinia'
import { usePlaylistStore } from '@/stores/playlist'
import { usePlayerStore } from '@/stores/player'
import { route } from '@/common/utils'

// 获取歌单数据和方法
// 解构 store 的状态，使用 storeToRefs 可以帮助保持响应性
const playlistStore = usePlaylistStore()
const { playlist, loading } = storeToRefs(playlistStore)
const { getPlaylist, setSongListByPlaylistId } = playlistStore
// 获取播放器数据和方法
const playerStore = usePlayerStore()
// 标题
const playlistTitle = ref('推荐歌单')
// 获取滚动方法
const { handleScroll } = inject('common', null)
// 导航栏高度
const navHeight = computed(() => {
  // #ifdef H5
  return 54
  // #endif
  return 44
})
// 导航左侧
const navBack = computed(() => {
  // #ifdef APP || H5
  return false
  // #endif
  return true
})
// 标题
const title = computed(() => {
  // #ifdef APP || H5
  return ''
  // #endif
  return '歌单'
})

// 去搜索页面
const goToSearch = () => {
  route('/pages/search/search')
}

// 去收藏页面
const goToCollect = () => {
  route('/pages/collect/collect')
}

// 切换分类
const getList = (value) => {
  playlistTitle.value = value
  getPlaylist(1, value)
}

onLoad((options) => getPlaylist())
</script>

<template>
  <ty-page
    :loading="loading"
    :title="title"
    icon-back-name="star"
    :nav-back="navBack"
    :icon-back-size="40"
    :nav-height="navHeight"
    :nav-style="{ background: 'inherit' }"
    :player-store="playerStore"
    :nav-custom-back="goToCollect"
  >
    <!-- #ifdef APP || H5 -->
    <!-- 导航栏 -->
    <template #nav>
      <u-search
        input-align="center"
        shape="square"
        disabled
        bg-color="#ffffff"
        placeholder="搜索歌单、歌曲及歌手"
        :show-action="false"
        :inputStyle="{ 'pointer-events': 'none' }"
        @click="goToSearch"
      ></u-search>
    </template>
    <!-- #endif -->
    <!-- #ifdef MP -->
    <u-search
      margin="0 20rpx"
      input-align="center"
      shape="square"
      disabled
      bg-color="#ffffff"
      placeholder="搜索歌单、歌曲及歌手"
      :show-action="false"
      :inputStyle="{ 'pointer-events': 'none' }"
      @click="goToSearch"
    ></u-search>
    <!-- #endif -->
    <ty-dropdown-menu @getList="getList"></ty-dropdown-menu>
    <!-- 内容 -->
    <view class="playlist">
      <view class="playlist-title">
        <u-section
          :title="playlistTitle"
          :right="!navBack"
          line-color="#465cff"
        >
          <!-- #ifdef APP || H5 -->
          <template #right>
            <u-icon
              name="star"
              color="#666"
              size="40"
              @click="goToCollect"
            ></u-icon>
          </template>
          <!-- #endif -->
        </u-section>
      </view>
      <view class="playlist-main">
        <ty-song-list
          item-bg-color="#f3f4f6"
          :list="playlist"
          is-row
          load-status="nomore"
          @scroll="handleScroll"
          @click="setSongListByPlaylistId"
        ></ty-song-list>
      </view>
    </view>
  </ty-page>
</template>

<style lang="scss" scoped>
.playlist {
  @include ty-flex-col;
  background-color: $u-bg-color-inverse;
  border-radius: $ty-border-radius;
  flex: 1;
  overflow: hidden;
  margin: 0 $ty-lg-padding $ty-lg-padding;
  &-title {
    color: $u-main-color;
    font-size: 30rpx;
    margin: $ty-xlg-padding;
  }
  &-main {
    flex: 1;
    overflow: hidden;
    padding-bottom: $ty-lg-padding;
    :deep(.ty-song-list) {
      margin-top: calc(0px - $ty-lg-padding);
    }
  }
}
</style>
